//资金管理 - 资金明细

import React, { Component } from 'react';
import { LocaleProvider, Form , Row, Col, Table, DatePicker, Select, Icon, Input, Tag } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import TitleBtn from '../../../components/TitleBtn';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
		key: i,
    id: `${i+1}`,
    orderNumber: 'T20000013P14B414221545015162017',
    consumeTime: '2018-12-17 10:52:42',
    consumeType: '运营商信息',
    consumeCount: 0.5,
    consumeStatus: ['成功'],
    note: ''
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Statement extends Component {

	handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <Icon type="appstore" />
            <span className="apply-font">消费明细</span>
            <TitleBtn />
          </div>
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
              <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('orderNumber', {
                      rules: [{ required: true, message: 'Please input your orderNumber!' }],
                    })(
                      <Input placeholder="订单号" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )} 
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('consumeStatus', {
                      rules: [{ required: true, message: 'Please input your consumeStatus!' }],
                    })(
                      <Select placeholder="消费状态" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }}>
                      <Select.Option value="success">成功</Select.Option>
                      <Select.Option value="false">失败</Select.Option>
                    </Select>
                    )} 
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('consumeType', {
                      rules: [{ required: true, message: 'Please input your consumeType!' }],
                    })(
                      <Select placeholder="消费类型" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }}>
                      <Select.Option value="note">注册短信</Select.Option>
                      <Select.Option value="identity">身份认证</Select.Option>
                      <Select.Option value="credit">信用信息</Select.Option>
                      <Select.Option value="runner">运行商信息</Select.Option>
                      <Select.Option value="machine">机器自动审核</Select.Option>
                    </Select>
                    )} 
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('range-picker', rangeConfig)(
                      <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='序号' align='center' dataIndex='id' width='30' />
              <Column title='订单编号' align='center' dataIndex='orderNumber' width='280px' />
              <Column title='消费时间' align='center' dataIndex='consumeTime' width='100' />
              <Column title='消费类型' align='left' dataIndex='consumeType' width='100' />
              <Column title='消费金额' align='right' dataIndex='consumeCount' width='70' />
              <Column title='消费状态' align='center' dataIndex='consumeStatus' width='80' 
                render={consumeStatus => (
                  <span>
                    {consumeStatus.map(consumeStatus => <Tag color="green" key={consumeStatus}>{consumeStatus}</Tag>)}
                  </span>
                )} />
              <Column title='备注' align='center' dataIndex='note' width='300px' />
            </Table>
          </div>
        </div>
      </LocaleProvider>  
		);
	}
}

const StatementForm = Form.create()(Statement);

export default StatementForm;